<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .float {
      float: left;
    }
    #main {
      width: 100%;
      height: 200px;
      background-color: lightpink;
    }
    #main-wrap {
      margin: 0 190px 0 190px;
    }
    #left {
      width: 190px;
      height: 200px;
      background-color: lightsalmon;
      margin-left: -100%;
    }
    #right {
      width: 190px;
      height: 200px;
      background-color: lightskyblue;
      margin-left: -190px;
    }
  /*
    上述代码中 margin-left: -100%
    相对的是父元素的 content  宽度，即不包含 padding 、 border  的宽度。
  */
  </style>

</head>
<body>
<div id="main" class="float">
  <div id="main-wrap">三栏布局，中间一栏最先加载和渲染 中间内容随着宽度自适应</div>
</div>
<div id="left" class="float">两侧内容固定 防止中间内容被两侧覆盖 双飞翼布局用 margin</div>
<div id="right" class="float">两侧内容固定 防止中间内容被两侧覆盖 双飞翼布局用 margin</div>
</body>
</html>
